<template>
	<view class="page1" style="">
		<commonNav :currentSewLine="currentSewLine.sewingName" :navTitle="navTitle" @backRouter="backToHome" />
		<u-sticky bgColor="#fff">
			<u-tabs :list="list1" lineWidth="80" lineColor="#3E8FF7" :activeStyle="{
						 color: '#3E8FF7',
						 fontWeight: '500',
						 transform: 'scale(1.05)'
				 }" :inactiveStyle="{
						 color: '#606266',
						 transform: 'scale(1)'
				 }" itemStyle="padding-left: 15px; padding-right: 15px; height: 50px;"
				 @click="changeTabs"
				 >
			</u-tabs>
		</u-sticky>
		<view class="table">
			<uni-table :stripe="false" :emptyText="$t('common.noData')">
				<!-- 表头行 -->
				<!-- <u-sticky> -->
					<uni-tr class="fixed-th">
						<!-- 序号 单号 款号 款名 客户 颜色 尺码 合格 返工 报废 登记时间 -->
						<uni-th width="50px" align="center">{{ $t('pages.quality.no') }}</uni-th>
						<uni-th width="100px" align="center">{{ $t('pages.quality.productionNo') }}</uni-th>
						<uni-th width="100px" align="center">{{ $t('pages.quality.styleNo') }}</uni-th>
						<uni-th width="140px" align="center">{{ $t('pages.quality.styleName') }}</uni-th>
						<uni-th width="100px" align="center">{{ $t('pages.quality.customer') }}</uni-th>
						<uni-th width="80px" align="center">{{ $t('pages.quality.color') }}</uni-th>
						<uni-th width="80px" align="center">{{ $t('pages.quality.size') }}</uni-th>
						<uni-th width="70px" align="center">{{ $t('pages.quality.pass') }}</uni-th>
						<uni-th width="70px" align="center">{{ $t('pages.quality.rework') }}</uni-th>
						<uni-th width="70px" align="center">{{ $t('pages.quality.scarp') }}</uni-th>
						<uni-th width="120px" align="center">{{ $t('pages.quality.regTime') }}</uni-th>
						<uni-th width="160px" align="center">{{ $t('common.operate') }}</uni-th>
					</uni-tr>
				<!-- </u-sticky> -->
				<!-- 表格数据行 -->
				<uni-tr v-for="(item, index) in tableData" :key="index">
					<uni-td align="center">{{index + 1}}</uni-td>
					<uni-td align="center">{{ item.billNo }}</uni-td>
					<uni-td align="center">{{ item.styleNo }}</uni-td>
					<uni-td align="center">{{ item.styleName }}</uni-td>
					<uni-td align="center">{{ item.customerName }}</uni-td>
					<uni-td align="center">{{ item.color }}</uni-td>
					<uni-td align="center">{{ item.size }}</uni-td>
					<uni-td align="center">{{ item.qualifiedNum || 0 }}</uni-td>
					<uni-td align="center">{{ item.unqualifiedNum || 0 }}</uni-td>
					<uni-td align="center">{{ item.discardedNum || 0 }}</uni-td>
					<uni-td align="center">{{ item.createDate }}</uni-td>
					<uni-td align="center">
						<view class="td-handle">
							<!-- <u-button class="isLink">isLink</u-button> -->
							<!-- <i class="t-icon t-icon-canshujilu" @click="viewRecordDetail(item.defectiveSpotList, item.processesList)"></i> -->
							<image src="../../../static/img/public/detail.png" style="width: 37.523rpx;height: 37.523rpx;"  @click="viewRecordDetail(item.defectiveSpotList, item.processesList)"></image>
							<i class="t-icon t-icon-bianji" v-show="!queryParams.today" @click="toUpdateRecord(item.id, 'update', item.productionId)"></i>
							<i class="t-icon t-icon-shanchu" v-show="!queryParams.today" @click="delItem(item,index)"></i>
						</view>
					</uni-td>
					<!-- 折叠表 -->
				</uni-tr>
			</uni-table>
		</view>
		<!-- <view class="fixed-button">
			<view class="back">
				<u-button>返回</u-button>
			</view>
			<view class="submit">
				<u-button type="primary">保存</u-button>
			</view>
		</view> -->
		<!-- 删除提示 -->
		<u-modal :show="delShow" :confirmText="$t('common.determine')" :cancelText="$t('common.cancel')"
			:showCancelButton="true" @confirm="del" @cancel="delShow = false" :content="$t('pages.quality.tips4')"></u-modal>
		<!-- 详情页面 -->
		<recordDetail :processesList="processesList" :defectiveSpotList="defectiveSpotList" ref="recordDetail"/>
	</view>
</template>

<script>
	import storage from "@/utils/storage.js"
	import commonNav from "@/components/nav/commonNav.vue"
	import recordDetail from "../production/components/recordDetail.vue"
	import { getRegistrationLog, deleteRegistrationLog } from "@/api/production.js"
	export default {
		components: {
			commonNav,
			recordDetail
		},
		data() {
			return {
				navTitle: this.$t('home.qualityRecord'),
				currentSewLine: storage.get('currentSewLineInfo') || {
					sewingName: '未选择缝制线'
				},
				// 详情数据
				defectiveSpotList: [],
				processesList: [],
				tableData: [],
				list1: [{
						name: this.$t('pages.quality.dayRecord')
					},
					{
						name: this.$t('pages.quality.histRecord')
					}
				],
				// 被删除内容
				delItemContent: {},
				delShow: false,
				queryParams: {
					sewingId: '',
					today: 0,
					inspectionId: '',
					page: 1,
					limit: 10
				}
			};
		},
		onShow() {},
		onLoad(option) {
			this.queryParams.sewingId = option.sewingId
			if (option.type === 'refresh') {
				this.queryParams.page = 1
				this.tableData = []
				this.getRegistrationLogInfo()
			}
			plus.screen.lockOrientation('landscape-primary') //锁定横屏
		},
		onReachBottom() { // 下拉刷新函数
		this.getRegistrationLogInfo()
		},
		mounted() {
			this.getRegistrationLogInfo()
		},
		methods: {
			backToHome() {
				uni.navigateTo({
					url: `/pages/index/index`
				})
			},
			// 获取产量登记记录
			getRegistrationLogInfo() {
				getRegistrationLog(this.queryParams).then(res => {
					if (res.code !== 0) return uni.$u.toast(res.msg)
					if (!res.data.list || res.data.list.length < 1) return false
						for (let obj of res.data.list) {
							this.tableData.push(obj)
						}
						this.queryParams.page++
					// this.tableData = res.data.list
				})
			},
			changeTabs(e) {
				this.tableData = []
				this.queryParams.today = e.index
				this.queryParams.page = 1
				this.getRegistrationLogInfo()
			},
			// 跳转修改记录
			toUpdateRecord(id, type, productionId) {
				uni.navigateTo({
					url: `/pages/quality/production/recordUpdate?sewingId=${this.queryParams.sewingId}&id=${id}&type=${type}&productionId=${productionId}`
				})
			},
			// 查看详情
			viewRecordDetail(defectiveSpotList, processesList) {
				this.defectiveSpotList = defectiveSpotList
				this.processesList = processesList
				this.$refs.recordDetail.open()
			},
			// 删除表格行
			delItem(item, index) {
				this.delItemContent = item
				this.delShow = true
			},
			del() {
				// 调用删除接口
				deleteRegistrationLog([this.delItemContent.id]).then(res => {
					if (res.code !== 0) {
						this.delShow = false
						return uni.$u.toast(res.msg)
					}
					this.queryParams.page = 1
					this.tableData = []
					// #ifdef APP-PLUS
					plus.nativeUI.toast(`<p style=\"font-size: 28px\">${this.$t('common.deleteTheSuccess')}</p>`,{
						type: "richtext",
						duration: "short",
						verticalAlign: "middle"
					}
					);
					// #endif
					setTimeout(() => {
						this.getRegistrationLogInfo()
					}, 1000)
					this.delShow = false
					// uni.$u.toast(this.$t('common.deleteTheSuccess'))
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page1 {
		width: 100%;
		// height: 100vh;
		overflow-x: hidden;
		// box-sizing: border-box;
	}
	/deep/.u-sticky__content {
		padding-top: 131.332rpx;
	}
	/deep/ .uni-table {
		// margin-top: 2%;
	}
	.fixed-th {
		th {
			color: #333;
		}
		// position: fixed;
	}
	.table {
		margin: 1% 0;
		.td-handle {
			display: flex;
			justify-content: space-evenly;
		}
		td {
			color: #585858!important;
		}
	}

	/deep/ .uni-table-th-content {
		font-size: 1rem;
	}

	.uni-table-td {
		font-size: 1rem;
	}

	/deep/ .u-tabs__wrapper__nav__item__text {
		font-size: 1.2rem;
	}

	.fixed-button {
		width: 100%;
		height: 10%;
		position: absolute;
		bottom: 0;
		display: flex;
		align-items: center;
		background: #FFFFFF;
		box-shadow: 0px -4px 12px 0px rgba(0, 0, 0, 0.3);

		.back {
			width: 30%;
			height: 90%;
			border-radius: 7.505rpx;
			box-sizing: border-box;

			/* 中性色/输入框边框DD */
			button {
				letter-spacing: 93.809rpx;
			}
		}

		.submit {
			width: 70%;
			height: 90%;
			border-radius: 7.505rpx;
			box-sizing: border-box;

			button {
				letter-spacing: 187.617rpx;
			}
		}

		button {
			height: 100%;
			width: 100%;
			font-size: 1.5rem;
			font-weight: bold;
		}
	}
</style>
